<template>
	<page  ref='page'>
		<!-- 商品详情 wwl -->
		<view class="page">
			<view class="list_info">
				<view class="row_info row_info3" @click="setPhoto(5)">
					<view class="left">
						店铺Logo
					</view>
					<view class="right_logo">
						<image :src="info.avatar" v-if='info.avatar' class="logo" mode="scaleToFill"></image>
						<text class="right_text" v-else>请选择店铺Logo</text>
					</view>
				</view>
				<view class="row_info">
					<view class="left">
						店铺名称
					</view>
					<input  maxlength="30" class="right_input" v-model="info.name" :disabled="status == 2"
						placeholder="请输入店铺名称" placeholder-style="color:#D5D5D5;font-size:28rpx" />
				</view>
				<view class="row_info">
					<view class="left">
						热线联系电话
					</view>
					<input  maxlength="21" class="right_input" v-model="info.phone" :disabled="status == 2"
						placeholder="请输入热线联系电话" placeholder-style="color:#D5D5D5;font-size:28rpx" />
				</view>
				<view class="row_info2" @click='changeAddress()'>
					<view class="left">
						店铺位置
					</view>
					<view class="right">
						<text class="right_text" v-if="info.address">{{info.address}}</text>
						<text class="right_text right_text2" v-else>请选择店铺位置</text>
						<n-icon name="right" size="32" color='#d5d5d5' style='margin-left: 5rpx;'></n-icon>
					</view>
				</view>
				<picker @change="changeType1"  :disabled="status == 2" range-key='name' :value='typeList1.findIndex(x=>x.id == info.build_city_id) == -1 ? null : typeList1.findIndex(x=>x.id == info.build_city_id)' :range="typeList1" >
					 <view class="row_info2">
						<text class="left">店铺分类</text>
						<view class="right">
							<text class="right_text" v-if="info.build_city_id">{{typeList1.find(x=>x.id == info.build_city_id).name}}</text>
							<text class="right_text right_text2" v-else>请选择店铺分类（总类型）</text>
							<n-icon name="right" size="32" color='#d5d5d5' style='margin-left: 5rpx;'></n-icon>
						</view>
					 </view>
				</picker>
				<picker @change="changeType2" :disabled="status == 2"  range-key='name' :value='typeList2.findIndex(x=>x.id == info.build_city_nav_id) == -1 ? null : typeList2.findIndex(x=>x.id == info.build_city_nav_id)' :range="typeList2" >
					 <view class="row_info2">
						<text class="left">商品分类</text>
						<view class="right">
							<text class="right_text" v-if="info.build_city_nav_id">{{typeList2.find(x=>x.id == info.build_city_nav_id).name}}</text>
							<text class="right_text right_text2" v-else>请选择商品分类</text>
							<n-icon name="right" size="32" color='#d5d5d5' style='margin-left: 5rpx;'></n-icon>
						</view>
					 </view>
				</picker>
				<view class="row_info1">
					<view class="left">
						营业执照
					</view>
				</view>
				<view class="row_image" @click="setPhoto(1)">
					<image class="image" :src="info.yy_zz" mode="scaleToFill" v-if='info.yy_zz'></image>
					<view class="upload_box" v-else>
						<n-icon name="add1" size="40" color="#919191"></n-icon>
						<text>上传照片</text>
						</block>
					</view>
				</view>
				<view class="row_info1">
					<view class="left">
						品牌授权书
					</view>
				</view>
				<view class="row_image" @click="setPhoto(2)">
					<image class="image" :src="info.pp_sq" mode="scaleToFill" v-if='info.pp_sq'></image>
					<view class="upload_box" v-else>
						<n-icon name="add1" size="40" color="#919191"></n-icon>
						<text>上传照片</text>
						</block>
					</view>
				</view>
				<view class="row_info1">
					<view class="left">
						产品质检报告
					</view>
				</view>
				<view class="row_image" @click="setPhoto(3)">
					<image class="image" :src="info.cp_zz" mode="scaleToFill" v-if='info.cp_zz'></image>
					<view class="upload_box" v-else>
						<n-icon name="add1" size="40" color="#919191"></n-icon>
						<text>上传照片</text>
						</block>
					</view>
				</view>
				<view class="row_info1">
					<view class="left">
						厂家连带责任书
					</view>
				</view>
				<view class="row_image" @click="setPhoto(4)">
					<image class="image" :src="info.cp_zrs" mode="scaleToFill" v-if='info.cp_zrs'></image>
					<view class="upload_box" v-else>
						<n-icon name="add1" size="40" color="#919191"></n-icon>
						<text>上传照片</text>
						</block>
					</view>
				</view>
			</view>
			<view class="button_box" v-if='status == 1 || status == 3'>
				<button class="button" :class="theme" @click='onSave()' :loading="loading">提交审核</button>
			</view>
		</view>
	</page>
</template>

<script>
	import {} from "../static/api.js"
	import { getbuildingMaterialsCityType,getCityName } from "@/utils/getRequest.js"
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default {
		data() {
			return {
				type:null,
				status:null,
				id:null,
				typeList1:[],
				typeList2:[],
				loading:false,
				info:{
					name:'',
					avatar:'',
					zone_id:'',
					build_city_id:'',
					build_city_nav_id:'',
					yy_zz:'',
					pp_sq:'',
					cp_zz:'',
					cp_zrs:'',
					address:'',
					longitude:'',
					latitude:'',
					phone:'',
					// service_scope:''
				}
			}
		},
		methods: {
			async onSave(){
				if(this.loading) return
				if (!this.$regular.funShowToast(null, this.info.avatar && this.info.avatar.length > 0  , '请选择店铺Logo!')) return false
				if (!this.$regular.funShowToast(null, this.info.name , '请输入店铺名称！')) return false
				if (!this.$regular.funShowToast(null, this.info.phone , '请输入热线联系电话！')) return false
				if (!this.$regular.funShowToast(null, this.info.address , '店铺位置！')) return false
				if (!this.$regular.funShowToast(null, this.info.build_city_id , '请选择店铺分类（总类型）！')) return false
				if (!this.$regular.funShowToast(null, this.info.build_city_nav_id , '请选择商品分类！')) return false
				if (!this.$regular.funShowToast(null, this.info.yy_zz && this.info.yy_zz.length > 0 , '请上传营业执照!')) return false
				if (!this.$regular.funShowToast(null, this.info.pp_sq && this.info.pp_sq.length > 0 , '请上传品牌授权书!')) return false
				if (!this.$regular.funShowToast(null, this.info.cp_zz && this.info.cp_zz.length > 0 , '请上传产品质检报告!')) return false
				if (!this.$regular.funShowToast(null, this.info.cp_zrs && this.info.cp_zrs.length > 0 , '请上传厂家连带责任书!')) return false
				this.loading = true
				uni.showLoading({mask: false})
				try{
					if(this.status == 1){
						var res = await getShopAddDefaultDetail(this.info)
					}else{
						var res = await getShopEditDefaultDetail({...this.info,id:this.id})
					}
					this.loading = false
					uni.hideLoading()
					this.$global.$editUploadBack(1,'shopList')
					uni.showToast({title:'操作成功'})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}catch{
					this.loading = false
					uni.hideLoading()
				}
				
			},
			async getTypeList1(){
				try{
					var res = await getbuildingMaterialsCityType()
					this.typeList1 = res
					if(this.info.build_city_nav_id) this.getTypeList2()
				}catch{
				}
			},
			async getTypeList2(){
				try{
					var res = await getBuildTabList({build_city_id:this.info.build_city_id})
					this.typeList2 = res
				}catch{
				}
			},
			changeType1(e){
				this.info.build_city_id = this.typeList1 && this.typeList1.length > 0 ? this.typeList1[e.detail.value].id : ''
				this.info.build_city_nav_id = ''
				this.getTypeList2()
			},
			changeType2(e){
				this.info.build_city_nav_id = this.typeList2 && this.typeList2.length > 0 ? this.typeList2[e.detail.value].id : ''
			},
			changeAddress(){
				if(this.status == 2) return
				uni.chooseLocation({
				    success: (res)=> {
						this.info.longitude = res.longitude
						this.info.latitude = res.latitude
						this.info.address = res.address
						getCityName({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(res2 => {
							this.info.zone_id = res2.id
						}).catch(() => {})
				    }
				});
			},
			setPhoto(type) {
				if(this.status == 2) return
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.$upload(res.tempFilePaths[0]).then(result => {
							if (result.code == 200) {
								if (result.code == 200){
									type == 5 ? this.info.avatar = result.data.img : type == 1 ? this.info.yy_zz =  result.data.img : 
									type == 2 ? this.info.pp_sq =  result.data.img : type == 3 ? this.info.cp_zz =  result.data.img: this.info.cp_zrs =  result.data.img
								}
							}
						})
					}
				})
			},
			changeCity(e) {
				this.info.office_addressName = e.name
				this.info.office_address =  e.code[e.code.length - 1]
			},
			async getInfo(){
				uni.showLoading()
				try{
					var res = await getShopDetailDefault({id:this.id})
					this.info = res
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			}
		},
		computed: {
			...mapGetters('theme', ['theme']),
			...mapState(['theme']),
			
		},
		onLoad(params) {
			this.status = params.status
			this.id = params.id
			this.type = params.type
			if(this.status != 1) this.getInfo()
			this.getTypeList1()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		padding-bottom: 180rpx;
	}

	.list_info {
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;

		.row_info2 {
			padding: 28rpx 0;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color: #26252A;
			display: flex;
			justify-content: space-between;
			.left {
				line-height: 40rpx;
			}

			.right {
				width: calc(100% - 7em);
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.right_text {
					width: calc(100% - 20rpx);
					text-align: right;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.right_text2 {
					width: calc(100% - 20rpx);
					color: #D5D5D5;
				}
			}
		}

		.row_info {
			padding: 28rpx 0;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color: #26252A;
			display: flex;
			justify-content: space-between;

			.left {
				line-height: 40rpx;
			}

			.right {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.right_input {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				color: #26252A;
				line-height: 40rpx;
			}
		}
		.row_info3{
			.left {
				align-self: center;
			}
			align-items: center;
			.right_logo {
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.logo{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.right_text{
				color:#d5d5d5
			}
		}
		.row_info1 {
			padding: 28rpx 0;
			font-size: 28rpx;
			color: #26252A;
		}

		.row_image {
			width: 100%;
			height: 414rpx;
			background: #ffffff;
			border: 2rpx dashed #d5d5d5;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.image {
				width: 100%;
				height: 414rpx;
			}
			.upload_box{
				width: 100%;
				height: 414rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					display: inline-block;
					margin-top: 30rpx;
					font-size: 28rpx;
					color:#919191
				}
			}
		}
	}

	.button_box {
		padding: 30rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		z-index: 9;
	}

	.button {
		width: 674rpx;
		margin: 0 auto;
		height: 88rpx;
		line-height: 88rpx;
		// background: linear-gradient(270deg, #ff7a1f, #ff9760);
		border-radius: 200rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>
